<template>
  <div class="home_page">
    <!-- 搜索 -->
    <van-search
      v-model="value"
      show-action
      :label="$store.state.name"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      class="vant-carousel-auto"
    >
      <template #left-icon>
        <div>
          <van-icon name="arrow-down" @click="toCityPage"></van-icon>
        </div>
      </template>
      <template #action>
        <!-- <div @click="onSearch">搜索</div>    -->
        <span class="iconfont icon-dituzhaofang"></span>
      </template>
    </van-search>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in picImg" :key="item.id">
        <van-image
          width="100%"
          :src="`http://liufusong.top:8080${item.imgSrc}`"
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 租房 -->
    <van-row class="vant-contend">
      <van-col span="6" @click="topushHouse">
        <van-image width="60%" :src="require('../../assets/image/4.png')" />
        <p>整租</p>
      </van-col>
      <van-col span="6" @click="topushHouse">
        <van-image width="60%" :src="require('../../assets/image/5.png')" />
        <p>合租</p>
      </van-col>
      <van-col span="6">
        <van-image width="60%" :src="require('../../assets/image/6.png')" />
        <p>地图找房</p>
      </van-col>
      <van-col span="6" @click="topushHouse">
        <van-image width="60%" :src="require('../../assets/image/7.png')" />
        <p>去出租</p>
      </van-col>
    </van-row>

    <div class="vant_moudle">
      <div class="vant_title">
        <strong>租房小组</strong>
        <span>更多</span>
      </div>

      <div class="vant-grid">
        <div class="vant-grid-con">
          <span class="iconfont icon-dituzhaofang"></span>
          <div class="right">
            <p>家住回龙观</p>
            <p>归属的感觉</p>
          </div>
        </div>

        <div class="vant-grid-con">
          <span class="iconfont icon-hezuohuobanxianxing"></span>
          <div class="right">
            <p>家住回龙观</p>
            <p>归属的感觉</p>
          </div>
        </div>
      </div>
      <div class="vant-grid">
        <div class="vant-grid-con">
          <span class="iconfont icon-zufangfenqi"></span>
          <div class="right">
            <p>家住回龙观</p>
            <p>归属的感觉</p>
          </div>
        </div>

        <div class="vant-grid-con">
          <span class="iconfont icon-chuzuwu"></span>
          <div class="right">
            <p>家住回龙观</p>
            <p>归属的感觉</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { homeSwiperAPI, homeGroupsAPI } from "@/api";
import { getCurrentInstance } from "vue";
export default {
  data() {
    return {
      value: "",
      picImg: [],
      // city:"深圳"
    };
  },
  props: {
    name: {
      type: String,
      default() {
        return "深圳";
      },
    },
  },
  mounted() {
    this.getImage();
  },
  methods: {
    async getImage() {
      try {
        const res = await homeSwiperAPI();
        this.picImg = res.data.body;
        console.log(this.picImg);
      } catch (err) {
        console.log(err);
      }
    },
    onSearch() {},
    toCityPage() {
      this.$router.push({
        path: "/cityList",
        query: {
          level: 1,
          // city:this.name
        },
      });
    },
    topushHouse() {
      this.$router.push({
        path: "/rend",
      });
    },
  },
};
</script>

<style scoped lang="less">
/* .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
  }
  .vant-carousel-auto{
    position: absolute;
    top: 20px;
    z-index: 1000;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height:40px;
  }
  .iconfont{
    font-size:32px;
  }
  .vant-contend{
    text-align:center;
    background-color: #fff;
    padding-top:10px;
  }
  .vant_moudle{
     padding: 10px 10px;
  }
  .vant_title{
    padding:10px 0;
    display: flex;
    justify-content: space-between;
  }
  .vant_icon{
    display: flex;
    justify-content: flex-start;
    background-color: #fff;
  }
  .vant-grid{
    margin-bottom: 10px;
    display: flex;
  }
  .vant-grid-con{
    width: 50%;
    padding:10px;
    background-color: #fff;
    display: flex;
    justify-content: flex-start;
  }
    .vant-grid-con:first-child{
      margin-right:10px;
    }
    .vant-grid-con .right{
      margin-left: 10px;
    }
    .home_page .icon-dituzhaofang{
      font-size:20px;
    } */
body {
  font-size: 0.4rem !important;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0.53rem;
  text-align: center;
}
.vant-carousel-auto {
  position: absolute;
  top: 0.53rem;
  z-index: 1000;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 1.06rem;
}
.iconfont {
  font-size: 0.85rem;
}
.vant-contend {
  text-align: center;
  background-color: #fff;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}
.vant_moudle {
  padding: 0.26rem 0.26rem;
}
.vant_title {
  padding: 0.26rem 0;
  display: flex;
  justify-content: space-between;
}
.vant_icon {
  display: flex;
  justify-content: flex-start;
  background-color: #fff;
}
.vant-grid {
  margin-bottom: 10px;
  display: flex;
}
.vant-grid-con {
  width: 50%;
  padding: 0.26rem;
  background-color: #fff;
  display: flex;
  justify-content: flex-start;
}
.vant-grid-con:first-child {
  margin-right: 0.26rem;
}
.vant-grid-con .right {
  margin-left: 0.26rem;
}
.home_page .icon-dituzhaofang {
  font-size: 0.53rem;
}
</style>
